<style lang="less">
  .f-w70 {
    width: 70% !important;
  }

  .f-c-red {
    color: red;
  }

  .f-c-green {
    color: green;
  }

</style>
<template>
  <div>
    <el-row style="margin-bottom: 0">
      <el-col :span="2">
        <el-button type="text" @click="backClick">返回上一页</el-button>
      </el-col>
      <el-col :span="22">
        <label>客户名称:{{this.mebUserData.realName}}&nbsp;&nbsp;&nbsp;&nbsp;{{this.mebUserData.phone}}</label>
      </el-col>
    </el-row>
    <br>
    <search-bar  style="height: 180px">
      <el-form ref="searchForm" :model="searchForm" label-position="right"
               label-width="120px">
        <el-row :span="24">
          <el-col :span="8">

            <el-form-item label="订单编号" prop="LIKE_orderNumber">
              <el-input v-model="searchForm.LIKE_orderNumber" placeholder="请输入订单编号"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="8">

            <el-form-item label="订单状态" prop="EQ_orderStatus">
              <el-select v-model="searchForm.EQ_orderStatus"
                         @visible-change="searchOrderStatus"
                         filterable placeholder="请选择订单状态">
                <el-option style="width: 200px" v-for="(os,index) in orderStatus"
                           :label="os.cnDictValname"
                           :value="os.dictVal" :key="index"></el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="8">

            <el-form-item label="收货人" prop="LIKE_sendContactName">
              <el-input v-model="searchForm.LIKE_sendContactName" placeholder="请输入收货人"></el-input>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">

            <el-form-item label="发货人" prop="LIKE_shipmentsContactName">
              <el-input v-model="searchForm.LIKE_shipmentsContactName" placeholder="请输入发货人姓名"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="8">

            <el-form-item label="收货人手机" prop="LIKE_sendContactPhone">
              <el-input v-model="searchForm.LIKE_sendContactPhone" placeholder="请输入收货人手机"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="8">

            <el-form-item label="发货人手机" prop="LIKE_shipmentsContactPhone">
              <el-input v-model="searchForm.LIKE_shipmentsContactPhone" placeholder="请输入发货人手机"></el-input>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">

            <el-form-item label="支付状态" prop="EQ_payStatus">
              <el-select v-model="searchForm.EQ_payStatus"
                         @visible-change="searchPayStatus"
                         filterable placeholder="请选择支付状态">
                <el-option style="width: 200px" v-for="(ps,index) in payStatus"
                           :label="ps.cnDictValname"
                           :value="ps.dictVal" :key="index"></el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="8">

            <el-form-item label="是否已签收" prop="LIKE_signOff.signOffStatus">
              <el-select v-model="searchForm['EQ_signOff.signOffStatus']"
                         @visible-change="searchSignOffStatus"
                         filterable placeholder="请选择是否已签收">
                <el-option style="width: 200px" v-for="(so,index) in signOffStatus"
                           :label="so.cnDictValname"
                           :value="so.dictVal" :key="index"></el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="8">

            <el-form-item label="下单日期">
              <el-date-picker
                v-model="noCreateDate"
                type="daterange"
                placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="签收日期">
              <el-date-picker
                v-model="noSignOffDate"
                type="daterange"
                placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发车日期">
              <el-date-picker
                v-model="noActualDepartureDate"
                type="daterange"
                placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </search-bar>
    <div class="f-mt f-wa f-fl" style="margin-bottom: 10px;margin-top: 10px">
      <el-button type="primary" @click="exportInfoFee">导出</el-button>
    </div>

    <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20" style="margin-bottom: 10px;margin-top: 10px"
               @click="reset()">重置
    </el-button>
    <el-button type="primary" class="f-wa f-fr f-ml10 " style="margin-bottom: 10px;margin-top: 10px"
               @click="searchOrders">查询
    </el-button>

    <el-table
      ref="multipleTable"
      :data="tableData"
      border max-height="500"
      tooltip-effect="dark"
      style="width: 100% ;margin-top: 10px">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="orderApp.orderNumber" label="订单编号" width="150">
        <template slot-scope="scope">
          <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
             @click="orderSelectDialog(scope.row.orderApp)">
            {{scope.row.orderApp.orderNumber}}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="shipInfo" label="日期" width="250">
        <template slot-scope="scope">
          下单日期 {{scope.row.orderDate}}<br>
          发运日期 {{scope.row.shipmentsDate}}<br>
          发车日期 {{scope.row.departDate}}<br>
          签收日期 {{scope.row.signOffDate}}<br>
        </template>
      </el-table-column>
      <el-table-column label="订单金额(元)"
                       width="120">
        <template slot-scope="scope">
          {{scope.row.orderApp.orderPrice}}<br>
          <label v-if="scope.row.orderApp.payStatus === 101003001" class="f-c-red">
            未支付
          </label>
          <label v-if="scope.row.orderApp.payStatus === 101003002" class="f-c-green">
            已支付
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="infoFee"
                       label="信息费(元)"
                       width="120">
      </el-table-column>
      <el-table-column prop="orderApp.paymentTypeName" label="结算方式" width="100"></el-table-column>
      <el-table-column prop="orderApp.orderStatusName" label="订单状态" width="100"></el-table-column>
      <el-table-column prop="shipInfo" label="是否已签收" width="120">
        <template slot-scope="scope">
          <label v-if="scope.row.isSignOff === 111002001">
            是
          </label>
          <label
            v-if="scope.row.isSignOff === 111002002 || scope.row.isSignOff === null || scope.row.isSignOff === '' || scope.row.isSignOff === undefined">
            否
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="shipInfo" label="发货信息" width="200px">
        <template slot-scope="scope">
          <label v-if="scope.row.shipInfo !== null || scope.row.shipInfo !== '' || scope.row.shipInfo !== undefined">
            {{scope.row.shipInfo}}<br>
          </label>
          <label
            v-if="scope.row.shipAddress !== null || scope.row.shipAddress !== '' || scope.row.shipAddress !== undefined">
            {{scope.row.shipAddress}}件<br>
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="receiptInfo" label="收货信息" width="200px">
        <template slot-scope="scope">
          <label
            v-if="scope.row.receiptInfo !== null || scope.row.receiptInfo !== '' || scope.row.receiptInfo !== undefined">
            {{scope.row.receiptInfo}}<br>
          </label>
          <label
            v-if="scope.row.receiptAddress !== null || scope.row.receiptAddress !== '' || scope.row.receiptAddress !== undefined">
            {{scope.row.receiptAddress}}件<br>
          </label>
        </template>
      </el-table-column>
      <el-table-column label="货物信息" style="width: 20%;">
        <template slot-scope="scope">
          <label
            v-if="scope.row.orderApp.cargoNames !== null || scope.row.orderApp.cargoNames !== '' || scope.row.orderApp.cargoNames !== undefined">
            {{scope.row.orderApp.cargoNames}}<br>
          </label>
          <label
            v-if="scope.row.orderApp.amount !== null || scope.row.orderApp.amount !== '' || scope.row.orderApp.amount !== undefined">
            {{scope.row.orderApp.amount}}件<br>
          </label>
          <label
            v-if="scope.row.orderApp.weight !== null || scope.row.orderApp.weight !== '' || scope.row.orderApp.weight !== undefined">
            {{scope.row.orderApp.weight}}吨<br>
          </label>
          <label
            v-if="scope.row.orderApp.volume !== null || scope.row.orderApp.volume !== '' || scope.row.orderApp.volume !== undefined">
            {{scope.row.orderApp.volume}}方<br>
          </label>
        </template>
      </el-table-column>
    </el-table>
    <span style="float: left; margin-top: 10px;"><b>{{this.infoFeeMsg}}</b></span>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total,sizes,prev, pager, next, jumper"
      :total="total" style="float: right;margin-top: 10px">
    </el-pagination>

    <!--订单查看Dialog-->
    <el-dialog title="订单查看" :visible.sync="orderSelect" width="80%">
      <order-select :title="orderSelectForm"></order-select>
    </el-dialog>
  </div>
</template>

<script>
import {searchInfoFeeMsgByUserId} from '../../api/fund/InfoFeeCount.js';
import {searchOrderInfoFeeCountDetail} from '../../api/order/order.js';
import {getUserByUserId} from '../../api/customer/maintain.js';
import {resetObjNull, isEmpty, objToFilter} from '../../lib/util.js';
import OrderSelect from './OrderSelectDialog.vue';
import {getDictEntityByDictCode} from '../../api/system/Dict.js';

export default {
  components: {
    'order-select': OrderSelect
  },
  data () {
    return {
      searchForm: {
        LIKE_orderNumber: null,
        GT_createDate: null,
        LT_createDate: null,
        LIKE_sendContactName: null,
        LIKE_shipmentsContactName: null,
        LIKE_sendContactPhone: null,
        LIKE_shipmentsContactPhone: null,
        EQ_payStatus: null,
        'GT_signOff.signOffDate': null,
        'LT_signOff.signOffDate': null,
        EQ_createDate: null,
        'EQ_signOff.signOffStatus': null,
        'GT_trunkTasks.loadingListTrunkTask.loadingListRoute.actualDepartureDate': null,
        'LT_trunkTasks.loadingListTrunkTask.loadingListRoute.actualDepartureDate': null
      },
      noCreateDate: [],
      noSignOffDate: [],
      noActualDepartureDate: [],
      orderStatus: [],
      payStatus: [],
      signOffStatus: [],
      id: this.$route.params.id,
      orderSelect: false,
      orderSelectForm: {},
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      mebUserData: {},
      infoFeeMsg: null,
      selectRowId: '',
      param: {
        filters: '',
        sorts: '',
        size: 15,
        page: 1
      }
    };
  },
  watch: {
    noCreateDate (val) {
      if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
        this.searchForm.GT_createDate = val[0].toJSON();
        this.searchForm.LT_createDate = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.searchForm.GT_createDate = null;
        this.searchForm.LT_createDate = null;
      }
    },
    noSignOffDate (val) {
      if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
        this.searchForm['GT_signOff.signOffDate'] = val[0].toJSON();
        this.searchForm['LT_signOff.signOffDate'] = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.searchForm['GT_signOff.signOffDate'] = null;
        this.searchForm['LT_signOff.signOffDate'] = null;
      }
    },
    noActualDepartureDate (val) {
      if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
        this.searchForm['GT_trunkTasks.loadingListTrunkTask.loadingListRoute.actualDepartureDate'] = val[0].toJSON();
        this.searchForm['LT_trunkTasks.loadingListTrunkTask.loadingListRoute.actualDepartureDate'] = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.searchForm['GT_trunkTasks.loadingListTrunkTask.loadingListRoute.actualDepartureDate'] = null;
        this.searchForm['LT_trunkTasks.loadingListTrunkTask.loadingListRoute.actualDepartureDate'] = null;
      }
    }
  },
  methods: {
    exportInfoFee () {
      location.href = '/api/v2.0/admin/freight_info_fee/' + this.selectRowId + '/download';
    },
    backClick () {
      this.$router.push('/settlement_platform/infoFeeCount');
    },
    searchSignOffStatus () {
      getDictEntityByDictCode({token: this.token, dictCode: 101009}).then((res) => {
        this.signOffStatus = res.data.detailModelList;
      });
    },
    searchPayStatus () {
      getDictEntityByDictCode({token: this.token, dictCode: 101003}).then((res) => {
        this.payStatus = res.data.detailModelList;
      });
    },
    searchOrderStatus () {
      getDictEntityByDictCode({token: this.token, dictCode: 101001}).then((res) => {
        this.orderStatus = res.data.detailModelList;
      });
    },
    orderSelectDialog (val) {
      this.orderSelect = true;
      this.orderSelectForm = val;
    },
    // 查询信息费
    orderDetail (filters, pageSize, currentPage) {
      if (!isEmpty(filters)) {
        this.param.filters = filters;
      }
      if (!isEmpty(pageSize)) {
        this.param.size = pageSize;
      }
      if (!isEmpty(currentPage)) {
        this.param.page = currentPage;
      }
      console.log(this.param);
      searchOrderInfoFeeCountDetail(this.param).then((res) => {
        if (res.data.successFlg) {
          this.tableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        }
      }).catch(function (error) {
        this.$message.error('查询失败:' + error);
      });
    },
    findInfoFeeMsgByUserId (userId) {
      searchInfoFeeMsgByUserId(userId).then((res) => {
        if (res.data.successFlg) {
          this.infoFeeMsg = res.data.obj;
        }
      });
    },
    serachMemberUser (id) {
      getUserByUserId(id).then((res) => {
        if (!isEmpty(res.data.obj)) {
          this.mebUserData = res.data.obj;
        } else {
          this.mebUserData = null;
        }
      });
    },
    init () {
      this.filters = 'EQ_memberUserId=' + this.id;
      this.selectRowId = this.id;
      this.serachMemberUser(this.id);
      this.orderDetail(this.filters);
      this.findInfoFeeMsgByUserId(this.id);
    },
    searchOrders () {
      let o = Object.assign({}, this.searchForm);
      this.param.filters = objToFilter(o);
      this.param.filters += ';EQ_memberUserId=' + this.id;
      this.orderDetail(this.param.filters, this.pageSize, this.currentPage);
    },
    reset () {
      this.tableData = [];
      this.noCreateDate = [];
      this.noSignOffDate = [];
      this.noActualDepartureDate = [];
      resetObjNull(this.searchForm);
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.orderDetail(this.param.filters, this.pageSize, this.currentPage);
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.orderDetail(this.param.filters, this.pageSize, this.currentPage);
    }
  },
  // 初始化数据
  mounted () {
    this.init();
  }
};
</script>
